/**
 * @desc: 查看打印记录弹窗
 * @author: fj
 */
import React, { useState, useEffect } from "react";
import { Button, Typography, Popover, Alert } from "antd";
import CommonModal from "@/components/CommonModal";
import CommonTable from "@/components/CommonTable";
import CommonTag from "@/components/CommonTag";
import CommonLoading from "@/components/CommonLoading";
import { queryPrinttaskDetail, queryPrintCodeDetail } from "../../service";
import styles from "./index.module.less";
import { logisticErrorTypeName } from "@/utils/config";
import { renderChannelIcon } from "@/utils/utils.jsx";

const { Paragraph } = Typography;

//订单状态
const orderStateMap = {
	10: "待审核",
	20: "待发货",
	30: "异常",
	40: "发货",
	50: "作废"
};

const ViewRecordsModal = ({ visible, record, handleCancel }) => {
	//详情数据
	const [data, setData] = useState([]);
	const [loading, setLoading] = useState(false);

	const title = record.printType == 1 ? '唯一码' : '订单';

	const columns = [
		{
			title: "序号",
			dataIndex: "no",
			key: "no",
			width: 80
		},
		{
			title: "出库单号",
			dataIndex: "orderSn",
			key: "orderSn",
			width: 220,
			render: (text, record) => {
				return (
					<div>
						<Paragraph style={{ margin: 0 }} copyable={{ text: text }}>
							<span onClick={() => goStorageorder(text)} className="opera-span-common" style={{ cursor: "pointer" }}>
								{text}
							</span>
						</Paragraph>
						<div>{record.createTime}</div>
						{record.packNum && record.packNum > 1 && (
							<span>
								<CommonTag type="yidanduobao" />
							</span>
						)}
					</div>
				);
			}
		},
		{
			title: "快递",
			dataIndex: "logisticsCompany",
			key: "logisticsCompany",
			width: 150,
			render: (text, record) => {
				return (
					<div>
						{/* <Paragraph style={{ margin: 0 }} copyable>
              {text}
            </Paragraph>
            <div>
              {record.logisticsCompany}
              {renderChannelIcon(record.logisticsUuid, record.uuid)}
            </div> */}
						<div>
							{renderLogisticError(record)}
							<span
								style={{
									display: "flex",
									alignItems: "center",
									flexWrap: "wrap"
								}}
							>
								{record.logisticsCompany ? (
									record.logisticsType == 1 ? (
										<>
											<span>{`${record.logisticsCompany}`}</span>
											(用户固定)
										</>
									) : (
										<>
											<span>{`${record.logisticsCompany}`}</span>
											{renderChannelIcon(record.logisticsUuid, record.uuid)}
										</>
									)
								) : (
									"未设置快递公司"
								)}
							</span>
						</div>
					</div>
				);
			}
		},
		{
			title: "收货信息",
			dataIndex: "orderReceiverInfo",
			key: "orderReceiverInfo",
			width: 200
		},
		{
			title: "状态",
			dataIndex: "orderState",
			key: "orderState",
			width: 100,
			render: (text, record) => {
				return <span>{orderStateMap[text]}</span>;
			}
		}
	];

	const codeColumns = [
		{
			title: "序号",
			dataIndex: "no",
			key: "no",
			width: 80
		},
		{
			title: "出库单号",
			dataIndex: "outboundNo",
			key: "outboundNo",
			width: 220,
			render: (text, record) => {
				return (
					<div>
						<Paragraph style={{ margin: 0 }} copyable={{ text: text }}>
							<span onClick={() => goStorageorder(text)} className="opera-span-common" style={{ cursor: "pointer" }}>
								{text}
							</span>
						</Paragraph>
						<div>{record.createTime}</div>
					</div>
				);
			}
		},
		{
			title: "商品唯一码",
			dataIndex: "code",
			key: "code",
			width: 150,
		},
		{
			title: "拿货状态",
			dataIndex: "statusName",
			key: "statusName",
			width: 100,
		}
	];

	//渲染运单号失败原因
	const renderLogisticError = record => {
		const val = record.logisticsJobType;

		if (val == 1) {
			return (
				<Paragraph copyable={true} style={{ marginBottom: "0px" }}>
					{record.logisticsNo}
				</Paragraph>
			);
		} else if (val == 4) {
			return (
				<Popover content={<div className="custom-ant-popver-content">{record.abnormalMessage}</div>}>
					<span className="textOverflowMultiThree">{record.abnormalMessage}</span>
				</Popover>
			);
		} else {
			return <span>{logisticErrorTypeName[val]}</span>;
		}
	};

	useEffect(() => {
		if (visible) {
			getPrintRecords();
		}
	}, [visible]);

	//取消
	const onCancel = () => {
		handleCancel();
	};

	//仓库订单号跳转到仓库订单
	const goStorageorder = url => {
		window.open(`${window.location.origin}/#/views/stock/GoodsOutboundOrder?orderSn=${url}`);
	};

	//获取打印记录
	const getPrintRecords = async () => {
		setLoading(true);
		const queryApi = record.printType == 1 ? queryPrintCodeDetail : queryPrinttaskDetail;
		const { data = [], success } = await queryApi({
			taskId: record.id
		});
		if (success) {
			setData(data);
		}
		setLoading(false);
	};

	//表格属性
	const TableProps = {
		data,
		columns: record.printType == 1 ? codeColumns : columns,
		size: "small",
		rowKey: "no",
		scroll: { x: 540, y: 300 }
	};

	return (
		<CommonModal
			title="查看打印记录"
			visible={visible}
			footer={[
				<Button key="cancel" onClick={onCancel}>
					关闭
				</Button>
			]}
			onCancel={onCancel}
			width={800}
		>
			<div>
				<Alert showIcon message={"①.显示的是这些仓库订单号当前最新的状态、快递和快递单号"} />
				<CommonTable style={{ margin: "16px 0px" }} {...TableProps} />
				<div className={styles.footer}>
					<span>{title}数量：</span>
					<span className="common-color9">{data.length}</span>
				</div>
				<CommonLoading loading={loading} />
			</div>
		</CommonModal>
	);
};

export default React.memo(ViewRecordsModal, (prev, next) => {
	if (prev.visible !== next.visible) {
		return false;
	}
	return true;
});
